<template>
    <div>
        <template v-for="item in subMenus">

            <template v-if="item.children">
                <template v-if="!item.meta.hideInMenu">
                    <el-submenu :index="parentPath+'/'+item.path" :key="`sum-menu-${item.path}`">
                        <template slot="title">
                            <i class="el-icon-menu"></i>
                            <span slot="title">{{item.meta.title}}</span>
                        </template>
                        
                        <SideSubMenu :subMenus="item.children" :parentPath="parentPath+'/'+item.path"></SideSubMenu>
                    </el-submenu>
                </template>
            </template>

            <template v-else>
                <template v-if="!item.meta.hideInMenu">
                    <template v-if="item.meta.href">
                        <template v-if="item.meta.iframe">
                            <router-link :to="parentPath+'/'+item.path" :key="`menu-${item.name}`">
                                <el-menu-item :index="parentPath+'/'+item.path" :key="item.path">
                                    <i class="el-icon-menu"></i>
                                    <span slot="title">{{item.meta.title}}</span>
                                </el-menu-item>
                            </router-link>
                        </template>

                        <template v-else>
                            <a :href="item.meta.href" target="_blank" :key="`menu-${item.name}`">
                                <el-menu-item :index="parentPath+'/'+item.path" :key="item.path">
                                    <i class="el-icon-menu"></i>
                                    <span slot="title">{{item.meta.title}}</span>
                                </el-menu-item>
                            </a>
                        </template>

                    </template>
                    <template v-else>
                        <router-link :to="parentPath+'/'+item.path" :key="`menu-${item.name}`">
                            <el-menu-item :index="parentPath+'/'+item.path" :key="item.path">
                                <i class="el-icon-menu"></i>
                                <span slot="title">{{item.meta.title}}</span>
                            </el-menu-item>
                        </router-link>
                    </template>

                </template>
            </template>

        </template>
    </div>
</template>

<script>
export default {
    name: 'SideSubMenu',
    props: {
        parentPath: {
            type: String,
            default() {
                return ''
            }
        },
        subMenus: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    data() {
        return {};
    }
}
</script>

<style lang="scss" scoped>
</style>